<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<style>
    .carousel,.carouselc,.lectureVideoC1{
        width: 400px;
        margin: 10px auto 0;
    }
    .carousel img,.carouselc img,.lectureVideoC1 img{
        width: 100%;
    }

    .carouselVideo,.carouselVideod,.lecturePictureC1{
        margin-top: 20px;
    }
    .carouselVideo video,.carouselVideod video,.lecturePictureC1 video{
        margin: 0 auto 20px;
        width: 400px;
        max-height: 500px;
        object-fit: contain;
        display: block;
    }
    .current,.userd,.match{
        background: #979797;
        color: #fff;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        padding-left: 15px;
    }
</style>
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12" style="float: initial">
            <div class="ibox float-e-margins">
                <div class="ibox-content">

                    <div class="col-sm-12" style="float: initial">
                        <p class="current"></p>
                        <div class="carousel"></div>
                        <div class="carouselVideo"></div>

                        <p class="userd"></p>
                        <div class="carouselc"></div>
                        <div class="carouselVideod"></div>

                        <p class="match"></p>
                        <div class="lectureVideoC1"></div>
                        <div class="lecturePictureC1"></div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script>

    $(function (){
        let obj = JSON.parse(sessionStorage.getItem('obj'));
        let str = '';
        let boxImg;

        if( obj.race == 'A' ){
            $(".current").html('模拟教学');
            $(".userd").remove()
            $(".carouselc").remove()
        }

        if( obj.race == 'C' ){
            $(".current").html('主题网络设计');
            $(".userd").html('集体教学活动设计');
            $(".match").html('说课');
        }

        if( obj.b != 'undefined' && obj.b != 'null' ){
            boxImg = obj.b.split(',');
            boxImg.map(function (val){
                str += `<img src="${val}">`
            })
            $(".carousel").html(str);
        }

        str = '';
        if( obj.a != 'undefined' && obj.a != 'null' ){
            // boxImg = obj.a.split(',');
            // boxImg.map(function (val){
            //     str += `<video controls autoplay name="media">
            //                 <source src="${val}" type="video/mp4">
            //             </video>`
            // })
            // $(".carouselVideo").html(str);
        }

        str = '';
        if( obj.d != 'undefined' && obj.d != 'null' ){
            boxImg = obj.d.split(',');
            boxImg.map(function (val){
                str += `<img src="${val}">`
            })
            $(".carouselc").html(str);
        }

        str = '';
        if( obj.c != 'undefined' && obj.c != 'null' ){
            boxImg = obj.c.split(',');
            boxImg.map(function (val){
                str += `<video controls autoplay name="media">
                            <source src="${val}" type="video/mp4">
                        </video>`
            })
            $(".carouselVideod").html(str);
        }

        str = '';
        if( obj.f != 'undefined' && obj.f != 'null' ){
            boxImg = obj.f.split(',');
            boxImg.map(function (val){
                str += `<img src="${val}">`
            })
            $(".lectureVideoC1").html(str);
        }

        str = '';
        if( obj.e != 'undefined' && obj.e != 'null'){
            boxImg = obj.e.split(',');
            boxImg.map(function (val){
                str += `<video controls autoplay name="media">
                            <source src="${val}" type="video/mp4">
                        </video>`
            })
            $(".lecturePictureC1").html(str);
        }


    })

</script>
</body>
</html>
